import { memo, useEffect, useRef, useState } from "react";
const Todo = (props) => {
    const { data, changeDone, removeTodo, editDone } = props;
    const { id, title, done } = data;
    let [editState, changeEditState] = useState(false)
    let [editVal, setEditVal] = useState(title)
    let edit = useRef()
    useEffect(() => {
        editState && edit.current.focus();
    }, [editState])
    // 监听有没有更新打印数据
    // console.log(id, "组件更新啦");
    return (
        <li className={editState ? "editing" : ""}>
            <div className={`todo ${done ? "done" : ""}`}>
                <div className="display">
                    <input className="check" type="checkbox" checked={done}
                        onChange={({ target }) => {
                            changeDone(id, target.checked)
                        }}
                    />
                    <div className="todo-content"
                        onDoubleClick={() => {
                            changeEditState(true)
                        }}
                    >{title}</div>
                    <span className="todo-destroy"
                        onClick={() => {
                            removeTodo(id)
                        }}
                    ></span>
                </div>
                <div className="edit">
                    <input className="todo-input" type="text"
                        ref={edit}
                        value={editVal}
                        onChange={({ target }) => {
                            setEditVal(target.value)
                        }}
                        onBlur={() => {
                            if (editVal.trim()) {
                                editDone(id, editVal);
                            } else {
                                setEditVal(title)
                            }
                            changeEditState(false)
                        }}
                    />
                </div>
            </div>
        </li>
    )
}
const NewTodo = memo(Todo, (props, prevProps) => {
    return props.data === prevProps.data
})
export default NewTodo;